<template>
	<view>
		<me-scroll-uni :down="downOption"
						@down="downCallback" 
						:up="upOption"
						@up="upCallback" 
						@init="mescrollInit"
						bottom="0" top="20" >
			<view class="list" v-if="comments">
				<view class="item" v-for="(item,index) in comments" :key="index">
					<view class="hd">
						<image :src="item.user.avatar || '/static/icon/missing-face.png'" mode="aspectFill"></image>
						<view class="name">{{item.user.user_name_view}}</view>
						<text class="name rating">评分：{{item.rating_text}}</text>
					</view>
					<view class="bd">{{item.add_time_date}} {{item.msg}}</view>
					<view class="content">{{item.content}}</view>
					<view class="imgs">
						<image :src="sItem" mode="aspectFill" v-for="(sItem,sIndex) in item.images" :key="sIndex" @tap="showImg(item,sIndex)"></image>
					</view>
					<view class="reply" v-if="item.is_reply==1">
						<view class="name">回复:<text>{{item.reply_time_date}}</text></view>
						<view class="bd">
							{{item.reply}}
						</view>
					</view>
				</view>
				
			</view>
		</me-scroll-uni>
	</view>
</template>

<script>
	import meScrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default{
		components: {
			meScrollUni,
		},
		data(){
			return {
				goodsId:0,
				comments:[],
				mescroll: null, // mescroll实例对象
				// 下拉刷新的常用配置
				downOption: {
					use: true, //是否启用下拉刷新;默认true
					auto: true //是否在初始化完毕之后自动执行下拉刷新的回调;默认true 
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, //是否启用上拉加载;默认true
					auto: true, //是否在初始化完毕之后自动执行上拉加载的回调,默认true
					page: {
						num: 0, //当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 //每页数据的数量，默认20
					},
					noMoreSize: 3, //配置列表的总数量要大于5条才显示‘--END--’的提示
					empty: {
						tip: '暂无相关数据'
					}
				}
				
			}
		},
		onLoad(params) {
			this.goodsId=params.id;
			
		},
		methods:{
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			// 下拉刷新的回调
			downCallback(mescroll) {
				setTimeout(function() {
					mescroll.endSuccess();
				}, 1000);
			},
			// 上拉加载的回调
			upCallback(mescroll) {
				// 此时mescroll会携带page的参数：
				let pageNum = mescroll.num; //页码，默认从1开始
				let pageSize = mescroll.size; //页长,默认每页10条
				this.loadData(pageNum, pageSize,mescroll);
			
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(pageNum = 1, pageSize =10,mescroll = []) {
				var self = this;
				// 获取商品评论
				let goodsComments=this.requestUrl.getGoodsComments;
				let commentsParams={
					data:{
						goods_id:this.goodsId
					}
				}
				this.util.request(goodsComments,'post',function(res){
					console.log(res);
					if(res.data.code==0 && res.data.data){
						let curPageData = res.data.data.data;
						let totalPage = res.data.data.page_total;
						self.comments = self.comments.concat(curPageData);
						// 最后一页了，显示end
						mescroll.endByPage(curPageData.length, totalPage);
					}
				},commentsParams)
			},
			showImg(item,index){
				uni.previewImage({
					urls:item.images,
					current:index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list{display: flex;flex-direction: column;padding:30rpx;background: $uni-bg-color-grey;}
.item{display: flex;flex-direction: column;margin-bottom: 20rpx;;background: #FFFFFF;border-radius: $uni-border-radius-base;padding:20rpx;}
.item .hd{float: left;}
.item .hd image{width:50rpx;height: 50rpx;border-radius: $uni-border-radius-circle;margin-right: 15rpx;float: left;}
.item .hd .name{font-size:$uni-font-size-base;color: $uni-text-color;line-height: 50rpx;float: left;}
.item .name text{font-size: $uni-font-size-sm;color: $uni-text-color-grey;float: right;}
.item .hd .rating{float: right;color:$uni-text-color-zhu;}
.item .bd{font-size: $uni-font-size-sm;color: $uni-text-color-grey;margin-top: 15rpx;}
.item .content{font-size:$uni-font-size-base;color: $uni-text-color;line-height: 40rpx;margin-top: 15rpx;}
.item .imgs{display: flex;flex-direction: row;justify-content: space-between;margin-top: 20rpx;}
.item .imgs image{width:200rpx;height: 200rpx;}
.item .reply{margin-top: 20rpx;}
</style>
